<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是我的个人OJ系统</title>

    <style>
        * {
            /* 消除网页的默认外边距和内边距 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: 'Arial', sans-serif; /* 使用更现代的字体 */
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* 添加渐变背景 */
            overflow-x: hidden; /* 防止横向滚动 */
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .navbar {
            background-color: #1e1e1e; /* 更深的黑色背景 */
            width: 100%;
            height: 60px; /* 稍高一点以增加空间感 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
            position: fixed; /* 固定导航栏 */
            top: 0;
            z-index: 1000;
            transition: background-color 0.3s ease; /* 平滑过渡 */
        }

        .navbar:hover {
            background-color: #333; /* hover时背景变化 */
        }

        .navbar a {
            color: white;
            font-size: 18px;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px; /* 圆角 */
            transition: background-color 0.3s ease, transform 0.2s ease; /* 添加过渡效果 */
        }

        .navbar a:hover {
            background-color: #4CAF50; /* 绿色hover效果 */
            transform: scale(1.05); /* 轻微放大 */
        }

        .navbar .nav-links {
            display: flex;
        }

        .navbar .login {
            margin-left: auto; /* 登录按钮靠右 */
        }

        .content {
            width: 800px;
            max-width: 90%; /* 响应式宽度 */
            background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
            margin: 150px auto 0; /* 调整顶部间距以适应固定导航栏 */
            padding: 40px;
            border-radius: 15px; /* 圆角 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 柔和阴影 */
            text-align: center;
            animation: fadeIn 1.5s ease-in-out; /* 淡入动画 */
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .content h1 {
            font-size: 36px;
            color: #333;
            margin-bottom: 20px;
            animation: slideInLeft 1s ease-out; /* 左侧滑入动画 */
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .content p {
            font-size: 18px;
            color: #555;
            margin-bottom: 30px;
        }

        .content a {
            display: inline-block;
            background-color: #4CAF50; /* 绿色按钮 */
            color: white;
            padding: 15px 30px;
            font-size: 18px;
            text-decoration: none;
            border-radius: 50px; /* 圆形按钮 */
            transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .content a:hover {
            background-color: #45a049;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
            transform: translateY(-3px); /* 轻微上移效果 */
        }

        /* 添加粒子背景动态效果 */
        #particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* 置于背景 */
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="navbar">
            <div class="nav-links">
                <a href="/">首页</a>
                <a href="/all_questions">题库</a>
                <a href="#">竞赛</a>
                <a href="#">求职</a>
            </div>
            <a href="#" class="login">登录</a>
        </div>
        <div class="content">
            <h1>欢迎来到我们的在线OJ平台</h1>
            <p>这是我开发的一个在线OJ平台</p>
            <a href="/all_questions">点击我开始编程</a>
        </div>
    </div>

    <!-- 添加粒子效果的canvas -->
    <canvas id="particles"></canvas>

    <script>
        // 简单的粒子动画脚本
        const canvas = document.getElementById('particles');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        class Particle {
            constructor(x, y, radius, color, velocity) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.velocity = velocity;
                this.alpha = 1;
            }

            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.restore();
            }

            update() {
                this.draw();
                this.x += this.velocity.x;
                this.y += this.velocity.y;
                this.alpha -= 0.005;
            }
        }

        let particles = [];

        function createParticles() {
            setInterval(() => {
                const x = Math.random() * canvas.width;
                const y = canvas.height + 10; // 从底部生成
                const radius = Math.random() * 2 + 1;
                const color = `rgba(76, 175, 80, ${Math.random()})`; // 绿色调
                const velocity = {
                    x: (Math.random() - 0.5) * 2,
                    y: -Math.random() * 2 - 1
                };
                particles.push(new Particle(x, y, radius, color, velocity));
            }, 100); // 每100ms生成一个粒子
        }

        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles.forEach((particle, i) => {
                if (particle.alpha > 0) {
                    particle.update();
                } else {
                    particles.splice(i, 1);
                }
            });
        }

        createParticles();
        animate();
    </script>
</body>

</html>